<template>
	<view class="content">
		<view class="">
			<view class="title">购买券</view>
			<view class="goumaiquan">
				<view class="coupon-item">
					<view class="quan flex-align-center">
						<view class="gmj-left">
							<text class="num">{{data.info.type.code==3?data.info.discount:data.info.ticketValue}}<text
									class="fuhao">{{data.info.type.code==3?'折':'￥'}}</text></text>
							<text class="jg">{{data.info.type.code==1?'':'价格：¥'+data.info.price}}</text>
						</view>

						<view class="line"></view>
						<view class="quan-sm">
							<text>{{data.info.type.value}}</text>
							<text>满{{data.info.threshold}}元可用</text>
						</view>
						<view class="draw-down">立即购买</view>
					</view>
				</view>

			</view>
		</view>

		<view class="info">
			<uv-cell-group>
				<uv-cell title="购买券名" :value="data.info.name"></uv-cell>
				<uv-cell title="使用限制" :value="data.info.isLimit.value">
					<template v-slot:right-icon>
						<uv-icon size="8" color="#2C2C2C" name="arrow-down-fill"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell title="价格" :value="`¥${data.info.price}元`"></uv-cell>
			</uv-cell-group>
		</view>
		<!-- 说明 -->
		<view class="instructions">
			<view class="title">票券说明</view>
			<view class="text">{{data.info.illustrate}}</view>
		</view>
		<Pay :type="2" :num="data.info.price" text='立即支付' :detail="data.info"></Pay>
		<view  v-if="false" class="btn-b">
			<view class="blue-btn">领取</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import Pay from "@/compoments/pay/pay.vue";
	import {
		getTicketDetail
	} from "../../../../requestApi/api.js";
	const data = ref({
		id: "",
		info: {},
	});
	onLoad((e) => {
		data.value.id = e.id;
		getDetail();
		
	})
	//获取详情
	const getDetail = () => {
		getTicketDetail({
			id: data.value.id
		}).then(res => {
			data.value.info = res.data;
		})
	};
</script>

<style lang="scss">
	.content {
		padding: 42rpx 42rpx 200rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #2C2C2C;
			margin-bottom: 28rpx;
		}

		.yhq {
			padding: 0 42rpx;
		}

		.info {
			margin-bottom: 32rpx;
		}

		.instructions {
			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: #1D2228;
				margin-bottom: 36rpx;
			}

			.text {
				height: 358rpx;
				border: 2px solid #F2F2F2;
				padding: 34rpx 38rpx;
				font-size: 28rpx;
				color: #2C2C2C;
			}
		}
	}

	/* 优惠券 */
	.goumaiquan {
		padding: 0 42rpx;
		margin-bottom: 38rpx;

		.coupon-item {
			width: 584rpx;
			height: 210rpx;
			position: relative;
			background: url('../../../../static/img/img/yhq-bg.png') no-repeat;
			background-size: cover;
			margin-bottom: 22rpx;


			.quan {
				height: 100%;
				padding-left: 34rpx;

				.gmj-left {
					display: flex;
					flex-direction: column;

					.jg {
						font-size: 24rpx;
						color: #F26D61;
						margin-left: 16rpx;
					}
				}

				.num {
					font-size: 96rpx;
					font-weight: bold;
					color: #F26D61;
					letter-spacing: -4rpx;
					font-family: DINCond-Black;
					position: relative;
					line-height: 90rpx;

					.fuhao {
						font-size: 48rpx;
						color: #F26D61;
						position: absolute;
						top: -20rpx;
						right: -30rpx;
					}
				}

				.line {
					height: 96rpx;
					width: 2rpx;
					background-color: rgba(242, 108, 97, .2);
					margin: 0 14rpx 0 40rpx;
				}

				.quan-sm {
					font-size: 24rpx;
					color: #F26D61;
					display: flex;
					flex-direction: column;

					text {
						margin-bottom: 8rpx;
					}
				}
			}

			.draw-down {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 32rpx;
				color: #FFFFFF;
				width: 56rpx;
				line-height: 36rpx;
				height: 210rpx;
				display: flex;
				align-items: center;
			}
		}

	}


	::v-deep .uv-cell__title-text {
		font-size: 28rpx !important;
		font-weight: bold !important;
		color: #1D2228 !important;
	}

	::v-deep .uv-cell__value {
		font-size: 28rpx !important;
		color: #2C2C2C !important;
	}

	::v-deep .uv-cell__body {
		padding: 32rpx 0 28rpx !important;
	}

	::v-deep .uv-line:first-child {
		border: none !important;
	}

	::v-deep .uv-line {
		border-bottom: 2rpx dashed #F5F5F5 !important;
	}

	::v-deep .uv-icon__icon {
		margin-left: 16rpx;
	}
</style>